<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言消息</title>
    <script src="js/tailwindcss.js"></script>
    <script src="js/swiper.js"></script>
    <link href="css/global.css" rel="stylesheet" lang="css">
</head>
<body>

<!--导航部分-->
<header class="h-[64px] w-full bg-white border-b border-gray-300/40 z-50 sticky top-0">
    <div class="max-w-7xl mx-auto w-full flex  items-center justify-between h-full">
        <div class="flex items-center gap-x-6">
            <span class="font-bold text-2xl">There is ZhaoPing</span>
            <nav class="hidden md:block">
                <ul class="list-none flex items-center gap-x-4">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li class="group  ">
                        <a  class="group-hover:hidden">新闻</a>
                        <ul class="hidden    group-hover:block ">
                            <li><a href="http://www.zpol.cn/xw">本地新闻</a></li>
                            <li><a href="https://www.cctv.com/">国内新闻</a></li>
                            <li><a href="https://news.cctv.cn/world/">国际新闻</a></li>
                        </ul>
                    </li>
                    <li class="group  ">
                        <a  class="group-hover:hidden">风景</a>
                        <ul class="hidden    group-hover:block ">
                            <li><a href="view.html">自然风光</a></li>
                            <li><a href="renwen.html">人文景观</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="foods.html">风味</a>
                    </li>
                </ul>
            </nav>
        </div>
        <a class="px-6 py-2 bg-blue-500 text-white rounded-full" href="message.html">留言</a>
    </div>
</header>

<!--本页内容区-->

    <div class="w-10/12 h-[443px] mx-auto  ">
    <img
            src="images/feedback1.png"
            alt="feedbackImg"/>
        <div class="w-7/12 m-auto">
            <form >
                <div class="space-y-12  p-12 border ">
                    <div class="border-b border-gray-900/10 pb-12">
                        <h1 class="text-base font-semibold leading-7 text-gray-900 text-center">留言反馈</h1>
                        <p class="mt-1 text-sm leading-6 text-center text-gray-600">按照提示输入内容留下您的意见。</p>

                        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                            <div class="sm:col-span-4">
                                <label for="username" class="block text-sm font-medium leading-6 text-gray-900">您的用户名</label>
                                <div class="mt-2">
                                    <div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                                        <span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm">lw1001.cn/</span>
                                        <input type="text" name="username" id="username" autocomplete="username" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="您的用户名">
                                    </div>
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="about" class="block text-sm font-medium leading-6 text-gray-900">您宝贵的意见与建议</label>
                                <div class="mt-2">
                                    <textarea id="about" name="about" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
                                </div>
                                <p class="mt-3 text-sm leading-6 text-gray-600">您可以随意填写意见与建议.</p>
                            </div>



                            <div class="col-span-full">
                                <label  class="block text-sm font-medium leading-6 text-gray-900">图片上传</label>
                                <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
                                    <div class="text-center">
                                        <svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
                                        </svg>
                                        <div class="mt-4 flex text-sm leading-6 text-gray-600">
                                            <label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
                                                <span>上传</span>
                                                <input id="file-upload" name="file-upload" type="file" class="sr-only">
                                            </label>
                                        </div>
                                        <p class="text-xs leading-5 text-gray-600">格式为PNG, JPG, GIF的文件并且大小不超过10MB</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-b border-gray-900/10 pb-12">
                        <h2 class="text-base font-semibold leading-7 text-gray-900 text-center ">个人信息</h2>

                        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                            <div class="sm:col-span-4">
                                <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">您的名字</label>
                                <div class="mt-2">
                                    <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>


                            <div class="sm:col-span-4">
                                <label for="email" class="block text-sm font-medium leading-6 text-gray-900">邮箱地址</label>
                                <div class="mt-2">
                                    <input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="sm:col-span-3">
                                <label for="country" class="block text-sm font-medium leading-6 text-gray-900">所在校区</label>
                                <div class="mt-2">
                                    <select id="country" name="country" autocomplete="country-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
                                        <option>东校区</option>
                                        <option>西校区</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="border-b border-gray-900/10 pb-12">
                            <h2 class="text-base font-semibold leading-7 text-gray-900  mt-3">反馈方式</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 ">对于您的建议我们会通过途径联系您。</p>

                            <div class="mt-10 space-y-10">
                                <fieldset>
                                    <legend class="text-sm font-semibold leading-6 text-gray-900">联系时段</legend>
                                    <div class="mt-6 space-y-6">
                                        <div class="relative flex gap-x-3">
                                            <div class="flex h-6 items-center">
                                                <input id="comments" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="comments" class="font-medium text-gray-900">工作日</label>
                                                <p class="text-gray-500">非节假日周一至周五8:00-18:00</p>
                                            </div>
                                        </div>
                                        <div class="relative flex gap-x-3">
                                            <div class="flex h-6 items-center">
                                                <input id="candidates" name="candidates" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="candidates" class="font-medium text-gray-900">休息日</label>
                                                <p class="text-gray-500">周末及节假日8:00-18:00</p>
                                            </div>
                                        </div>
                                        <div class="relative flex gap-x-3">
                                            <div class="flex h-6 items-center">
                                                <input id="offers" name="offers" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="offers" class="font-medium text-gray-900">任何时段</label>
                                                <p class="text-gray-500">任何时段您都方便接收邮件</p>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset>
                                    <legend class="text-sm font-semibold leading-6 text-gray-900">推送内容</legend>
                                    <p class="mt-1 text-sm leading-6 text-gray-600">给您反馈的邮件包含的内容</p>
                                    <div class="mt-6 space-y-6">
                                        <div class="flex items-center gap-x-3">
                                            <input id="push-everything" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            <label for="push-everything" class="block text-sm font-medium leading-6 text-gray-900">任何内容</label>
                                        </div>
                                        <div class="flex items-center gap-x-3">
                                            <input id="push-email" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            <label for="push-email" class="block text-sm font-medium leading-6 text-gray-900">仅反馈内容</label>
                                        </div>
                                        <div class="flex items-center gap-x-3">
                                            <input id="push-nothing" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                            <label for="push-nothing" class="block text-sm font-medium leading-6 text-gray-900">不接受推送</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 w-[100px] flex items-center justify-end gap-x-6 m-auto">
                        <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">提交</button>
                    </div>
            </form>
        </div>

    </div>

<!--底部链接导航-->
<section class="max-w-7xl mx-auto my-10">
    <div class="flex justify-start gap-6">
        <div class="font-bold text-2xl text-gray-500 ">友情链接</div>
        <div class="p-2 flex items-center gap-4 flex-wrap">
            <a href="https://www.ylu.edu.cn/index.htm">玉林师范学院</a>
            <a href="http://webui.lw1001.cn/">原演示地址(视频服务器已关闭)</a>
        </div>
    </div>

</section>

<footer class="h-[64px] w-full">
    <div class="flex max-w-7xl mx-auto h-full justify-center gap-x-2 items-center">
        <span>202306062127</span>
        <strong>梁伟明</strong>
        <span>2023上学年WEBUI期末考试</span>
    </div>
</footer>
</body>
</html>
